<template>
  <div id="Ground">
    <div class="filter-box" v-if="!isEdit">
      <a-tabs v-model="activeName">
        <a-tab-pane tab="盘点上架" key="check"></a-tab-pane>
        <a-tab-pane tab="直接上架" key="direct"></a-tab-pane>
      </a-tabs>
    </div>
    <div class="container" v-if="activeName === 'direct' || isEdit">
      <div class="info-title">基本信息</div>
      <a-form-model
        ref="form"
        :model="form"
        :rules="rules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <div class="form-row">
          <a-form-model-item label="物资编号" class="form-col" prop="ncMaterielIds">
            <!-- <a-select
              v-model="form.ncMaterielId"
              allowClear
              placeholder="请选择物资编号"
              @change="(val) => chooseMaterial(val)"
            >
              <a-select-option
                  v-for="option in materialList"
                  :key="option.name"
                  :value="option.id">
                  {{option.id}}
              </a-select-option>
            </a-select> -->
            <!-- <a-cascader
              v-model="form.ncMaterielIds"
              :options="materialList"
              :load-data="loadData"
              :fieldNames="{ label: 'name', value: 'id', children: 'child' }"
              placeholder="请选择物资编号"
              @change="changeMaterial"
            /> -->
            <a-input v-model="form.ncMaterielId" disabled placeholder="请输入物资编号" />
          </a-form-model-item>
          <a-form-model-item label="物资名称" class="form-col" prop="ncMaterielName">
            <!-- <a-select
              v-model="form.ncMaterielId"
              allowClear
              placeholder="请选择"

            >
              <a-select-option
                  v-for="option in wuliangList"
                  :key="option.id"
                  :value="option.id">
                  {{option.name}}
              </a-select-option>
            </a-select> -->
            <a-input v-model="form.ncMaterielName" disabled placeholder="请输入物资名称" />
          </a-form-model-item>
          <a-form-model-item label="规格" class="form-col" >
            <a-input v-model="form.goodsSpec" disabled placeholder="请输入规格" />
          </a-form-model-item>
          <a-form-model-item label="型号" class="form-col" >
            <a-input v-model="form.goodsModel" disabled placeholder="请输入型号" />
          </a-form-model-item>
          <!-- <a-form-model-item label="采购价格" class="form-col" prop="buyPrice">
            <a-input v-model="form.buyPrice" placeholder="请输入采购价格" />
          </a-form-model-item> -->
          <a-form-model-item label="单位" class="form-col">
            <a-select
              v-model="form.goodsUnit"
              allowClear
              disabled
              placeholder="请选择单位"
            >
              <a-select-option
                    v-for="option in unitList"
                    :key="option.value"
                    :value="option.value">
                    {{option.label}}
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="单价" class="form-col">
            <a-input v-model="form.unitPrice2" disabled placeholder="请输入上架价格" />
          </a-form-model-item>
          <a-form-model-item label="折扣" class="form-col" prop="discount">
            <a-input-number
              v-model="form.discount"
              placeholder="请输入折扣"
              :formatter="(value) => `${value}%`"
              :parser="(value) => value.replace('%', '')"
              @change="changeDiscount"
            />
          </a-form-model-item>
          <a-form-model-item label="上架价格" class="form-col" prop="unitPrice">
            <a-input v-model="form.unitPrice" @change="changeUnitPrice" placeholder="请输入上架价格" />
          </a-form-model-item>

          <a-form-model-item label="上架类型" class="form-col" prop="goodsType">
            <a-select
              v-model="form.goodsType"
              allowClear
              placeholder="请选择"
            >
              <a-select-option
                  v-for="option in typeList"
                  :key="option.label"
                  :value="option.value">
                  {{option.label}}
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="闲置可调拨数量" class="form-col" prop="number">
            <a-input v-model="form.number" disabled placeholder="请输入闲置可调拨数量" />
          </a-form-model-item>
          <a-form-model-item label="上架数量" class="form-col" prop="number">
            <a-input v-model="form.upNumber" disabled placeholder="请输入上架数量" />
          </a-form-model-item>
          <!-- <a-form-model-item label="资产类别" class="form-col" prop="goodsKind">
            <a-select
              v-model="form.goodsKind"
              allowClear
              placeholder="请选择"
            >
              <a-select-option
                  v-for="option in kindList"
                  :key="option.label"
                  :value="option.value">
                  {{option.label}}
              </a-select-option>
            </a-select>
          </a-form-model-item> -->
          <a-form-model-item label="区域" class="form-col" prop="cityId">
            <a-row :gutter="10">
              <a-col :span="12">
                <a-select v-model="form.provinceId" placeholder="请选择省份" @change="(val) => this.getCity('form', val, '')">
                  <a-select-option
                      v-for="option in provinceList"
                      :key="option.value"
                      :value="option.value">
                      {{option.label}}
                </a-select-option>
                </a-select>
              </a-col>
              <a-col :span="12">
                <a-select
                  v-model="form.cityId"
                  placeholder="请选择"
                >
                  <a-select-option
                      v-for="option in cityList"
                      :key="option.value"
                      :value="option.value">
                      {{option.label}}
                </a-select-option>
                </a-select>
              </a-col>
            </a-row>
          </a-form-model-item>
          <a-form-model-item label="联系电话" class="form-col" prop="linkPhone">
            <a-input v-model="form.linkPhone" placeholder="请输入联系电话" />
          </a-form-model-item>
          <a-form-model-item label="联系人" class="form-col" prop="linkMan">
            <a-input v-model="form.linkMan" placeholder="请输入联系人" />
          </a-form-model-item>
        </div>
        <div class="form-row">
          <a-form-model-item label="详细地址" class="form-col" prop="address">
            <a-input v-model="form.address" placeholder="请输入详细地址" />
          </a-form-model-item>
          <a-form-model-item label="所属项目" class="form-col" prop="ncProjectId">
            <a-select
              v-model="form.ncProjectId"
              allowClear
              disabled
              placeholder="请选择所属项目"
            >
              <a-select-option
                    v-for="option in projects"
                    :key="option.ncProjectName"
                    :value="option.ncProjectId">
                    {{option.ncProjectName}}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </div>
        <div class="form-row">
          <a-form-model-item label="物资详情" class="form-col" prop="goodsDesc">
            <a-input
              v-model="form.goodsDesc"
              type="textarea"
              :rows="3"
              placeholder="请输入物资详情"
            />
          </a-form-model-item>
        </div>
      </a-form-model>
      <div class="info-title"><i class="required">*</i> 资产照片</div>
      <Upload
        :defaultList="goodsPics"
        @change="handleDirectUpload"
        @remove='handleDirectRemove'
        :limit="8"
      />
      <div class="footer-btns">
        <a-button type="primary" @click="handleSubmit" v-if="!isEdit">上架</a-button>
        <a-button type="primary" @click="goBack" v-if="isEdit">返回</a-button>
        <a-button type="primary" @click="handleSubmit" v-if="isEdit">提交</a-button>
      </div>
    </div>
    <!-- <div class="container" v-if="activeName === 'check'">
      <DataTable
        v-if="firstStep"
        :showConfig="false"
        rowKey="ncMaterielId"
        :btns="btns"
        :tableData="Data"
        :expand="true"
        :tableColumn="tableColumn"
        :rowSelection="{ selectedRowKeys: selectedGoods, onChange: changeSelection }"
        :pageConfig="pageConfig"
      >
        <template #expand="{ data }">
          <div class="expand-box">
            <Upload :defaultList="data.countingTaskGoodsFiles" @change="handleUpload" :disabled="true" :limit="6" />
          </div>
        </template>
      </DataTable>
      <DataTable
        v-if="secondStep"
        rowKey="ncMaterielId"
        :btns="editBtns"
        :tableData="editData"
        :expand="true"
        :tableColumn="editTableColumn"
      >
        <template #expand="{ index, data }">
          <div class="expand-box">
            <Upload :defaultList="data.countingTaskGoodsFiles" @change="handleUpload" @click="clickUpload(index)" :limit="6" />
          </div>
        </template>
      </DataTable>
      <div class="page-box" v-if="secondStep">
        <a-button type="primary" @click="nextStep('second')">下一步</a-button>
      </div>
      <div class="last-step" v-if="thirdStep">
        <a-button type="primary" @click="backTop('third')">返回上一步</a-button>
        <a-form-model
          ref="editForm"
          :model="editForm"
          :rules="editRules"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
        >
          <div class="form-row">
             <a-form-model-item label="区域" class="form-col" prop="cityId">
              <a-row :gutter="10">
                <a-col :span="12">
                  <a-select v-model="editForm.provinceId" placeholder="请选择省份" @change="(val) => this.getCity('editForm', val, '')">
                    <a-select-option
                        v-for="option in provinceList"
                        :key="option.value"
                        :value="option.value">
                        {{option.label}}
                  </a-select-option>
                  </a-select>
                </a-col>
                <a-col :span="12">
                  <a-select
                    v-model="editForm.cityId"
                    placeholder="请选择"
                  >
                    <a-select-option
                        v-for="option in cityList"
                        :key="option.value"
                        :value="option.value">
                        {{option.label}}
                  </a-select-option>
                  </a-select>
                </a-col>
              </a-row>
            </a-form-model-item>
            <a-form-model-item label="联系电话" class="form-col" prop="linkPhone">
              <a-input
                v-model="editForm.linkPhone"
                placeholder="请输入联系电话"
              />
            </a-form-model-item>
            <a-form-model-item label="联系人" class="form-col" prop="linkMan">
              <a-input v-model="editForm.linkMan" placeholder="请输入联系人" />
            </a-form-model-item>
          </div>
          <div class="form-row">
            <a-form-model-item
              label="详细地址"
              class="form-col"
              prop="address"
            >
              <a-input v-model="editForm.address" placeholder="请输入详细地址" />
            </a-form-model-item>
          </div>
          <div class="form-row">
            <a-form-model-item
              label="物资详情"
              class="form-col"
              prop="goodsDesc"
            >
              <a-input
                v-model="editForm.goodsDesc"
                type="textarea"
                :rows="3"
                placeholder="请输入物资详情"
              />
            </a-form-model-item>
          </div>
        </a-form-model>
        <div class="footer-btns">
          <a-button type="primary" @click="handleBatchUp" v-if="!isEdit">上架</a-button>
          <a-button type="primary" @click="goBack" v-if="isEdit">返回</a-button>
          <a-button type="primary" @click="handleBatchUp" v-if="isEdit">提交</a-button>
        </div>
      </div>
    </div> -->
    <!-- 批量上架的操作上架 -->
    <!-- <a-modal
      title="上架"
      width="800px"
      :visible="visible"
      okText="上架"
      @ok="handleSubmit"
      @cancel="handleCancel"
    >
      <div class="info-title">基本信息</div>
      <a-form-model
        ref="form"
        :model="form"
        :rules="rules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <div class="form-row">
          <a-form-model-item label="物资分类" class="form-col" prop="ncMaterielId">
            <a-input v-model="form.ncMaterielId" disabled placeholder="请输入物资编号" />
          </a-form-model-item>
          <a-form-model-item label="物资名称" class="form-col" prop="ncMaterielName">
            <a-input v-model="form.ncMaterielName" disabled placeholder="请输入物资名称" />
          </a-form-model-item>
          <a-form-model-item label="规格" class="form-col" prop="goodsSpec">
            <a-input v-model="form.goodsSpec" placeholder="请输入规格" />
          </a-form-model-item>
          <a-form-model-item label="型号" class="form-col" prop="goodsModel">
            <a-input v-model="form.goodsModel" placeholder="请输入型号" />
          </a-form-model-item>
          <a-form-model-item label="采购价格" class="form-col" prop="buyPrice">
            <a-input v-model="form.buyPrice" placeholder="请输入采购价格" />
          </a-form-model-item>
          <a-form-model-item label="单位" class="form-col" prop="goodsUnit">
            <a-select
              v-model="form.goodsUnit"
              allowClear
              placeholder="请选择单位"
            >
              <a-select-option
                    v-for="option in unitList"
                    :key="option.value"
                    :value="option.value">
                    {{option.label}}
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="折扣" class="form-col" prop="discount">
            <a-input-number
              v-model="form.discount"
              placeholder="请输入折扣"
              type="number"
              :max="100"
              :min="0"
              :formatter="(value) => `${value}%`"
              :parser="(value) => value.replace('%', '')"
            />
          </a-form-model-item>
          <a-form-model-item label="上架价格" class="form-col" prop="unitPrice">
            <a-input v-model="form.unitPrice" placeholder="请输入上架价格" />
          </a-form-model-item>
          <a-form-model-item label="可周转数量" class="form-col" prop="number">
            <a-input v-model="form.number" :placeholder="`不能大于可上架数量: ${form.surplusNum}`" />
          </a-form-model-item>
          <a-form-model-item label="上架类型" class="form-col" prop="goodsType">
            <a-select
              v-model="form.goodsType"
              allowClear
              placeholder="请选择"
            >
              <a-select-option
                  v-for="option in typeList"
                  :key="option.label"
                  :value="option.value">
                  {{option.label}}
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="资产类别" class="form-col" prop="goodsKind">
            <a-select
              v-model="form.goodsKind"
              allowClear
              placeholder="请选择"
            >
              <a-select-option
                  v-for="option in kindList"
                  :key="option.label"
                  :value="option.value">
                  {{option.label}}
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="区域" class="form-col" prop="cityId">
            <a-row :gutter="10">
              <a-col :span="12">
                <a-select v-model="form.provinceId" placeholder="请选择省份" @change="(val) => this.getCity('form', val, '')">
                  <a-select-option
                      v-for="option in provinceList"
                      :key="option.value"
                      :value="option.value">
                      {{option.label}}
                </a-select-option>
                </a-select>
              </a-col>
              <a-col :span="12">
                <a-select
                  v-model="form.cityId"
                  placeholder="请选择"
                >
                  <a-select-option
                      v-for="option in cityList"
                      :key="option.value"
                      :value="option.value">
                      {{option.label}}
                </a-select-option>
                </a-select>
              </a-col>
            </a-row>
          </a-form-model-item>
          <a-form-model-item label="联系电话" class="form-col" prop="linkPhone">
            <a-input v-model="form.linkPhone" placeholder="请输入联系电话" />
          </a-form-model-item>
          <a-form-model-item label="联系人" class="form-col" prop="linkMan">
            <a-input v-model="form.linkMan" placeholder="请输入联系人" />
          </a-form-model-item>
        </div>
        <div class="form-row">
          <a-form-model-item label="详细地址" class="form-col" prop="address">
            <a-input v-model="form.address" placeholder="请输入详细地址" />
          </a-form-model-item>
        </div>
        <div class="form-row">
          <a-form-model-item label="物资详情" class="form-col" prop="goodsDesc">
            <a-input
              v-model="form.goodsDesc"
              type="textarea"
              :rows="3"
              placeholder="请输入物资详情"
            />
          </a-form-model-item>
        </div>
      </a-form-model>
      <div class="info-title">资产照片</div>
      <Upload
        :defaultList="goodsPics"
        @change="handleDirectUpload"
        :limit="8"
      />
    </a-modal> -->
  </div>
</template>

<script lang="ts">
import { Validate } from '@/decorator';
import rules from '@/util/rules'
import { Component, Vue, Watch } from 'vue-property-decorator';

@Component
export default class Ground extends Vue {
  activeName: string = 'check';
  visible: boolean = false;
  firstStep: boolean = true;
  secondStep: boolean = false;
  thirdStep: boolean = false;
  searchForm: any = {
    searchValue: ''
  };
  wuliangList:any = [] // 物料数组
  form: any = {
    status: 'YSJ',
    cityId: undefined,
    provinceId: undefined,
    ncMaterielId: undefined,
    taskDetailId: undefined
  }; // 商品信息
  editForm: any = {
    address: '',
    goodsDesc: '',
    linkMan: '',
    linkPhone: '',
    status: 'YSJ',
    provinceId: undefined,
    cityId: undefined,
    ncProjectId: undefined
  }
  goodsPics: any = [] // 资产图片
  btns: any[] = [
    {
      label: '批量上架',
      callback: () => this.nextStep('first')
    }
  ];
  editBtns: any[] = [
    {
      label: '返回上一步',
      callback: () => this.backTop('second')
    }
  ];
  editData: any = []
  typeList: any = [
    {
      label: '固定资产',
      value: 'GDZC'
    },
    {
      label: '主材',
      value: 'ZC'
    },
    {
      label: '辅材',
      value: 'FC'
    },
    {
      label: 'A类周转材料(模板支撑)',
      value: 'AZZCL'
    },
    {
      label: 'B类周转材料(料架防护)',
      value: 'BZZCL'
    },
    {
      label: 'C类周转材料(重大设施)',
      value: 'CZZCL'
    },
    {
      label: 'D类周转材料(其他)',
      value: 'DZZCL'
    }
    /* {
      label: '剩余物资',
      value: 'XYWZ'
    },
    {
      label: '办公物品',
      value: 'BGWP'
    } */
  ]
  get filterData () {
    return {
      searchValue: {
        label: '关键词',
        type: 'input',
        template: {
          placeholder: '请输入关键词',
          clearable: true
        }
      }
    };
  }
  Data: any = [];
  tableColumn: any = {
    ncMaterielId: {
      label: '材料编码',
      width: 120
    },
    ncMaterielName: {
      label: '材料名称',
      width: 200
    },
    // goodsModel: {
    //   label: '型号',
    //   width: 200
    // },
    // goodsSpec: {
    //   label: '规格',
    //   width: 120
    // },
    // goodsUnit: {
    //   label: '单位',
    //   width: 120,
    //   map: {
    //     'LFM': '立方米',
    //     'M': '米',
    //     'D': '吨',
    //     'PFM': '平方米'
    //   }
    // },
    goodsSum: {
      label: '闲置数量',
      width: 120
    },
    surplusNum: {
      label: '可上架数量',
      width: 120
    },
    action: {
      label: '操作',
      width: 230,
      fixed: false,
      template: [
        {
          tag: 'a',
          text: '上架',
          callback: (row: any) => this.upGoods(row)
        }
      ]
    }
  };
  editTableColumn: any = {
    goodsCode: {
      label: '材料编码',
      width: 120
    },
    ncMaterielName: {
      label: '材料名称'
    },
    // goodsModel: {
    //   label: '型号',
    //   width: 200
    // },
    // goodsSpec: {
    //   label: '规格',
    //   width: 120
    // },
    // goodsUnit: {
    //   label: '单位',
    //   width: 120,
    //   map: {
    //     'LFM': '立方米',
    //     'M': '米',
    //     'D': '吨',
    //     'PFM': '平方米'
    //   }
    // },
    goodsSum: {
      label: '闲置数量',
      width: 120
    },
    discount: {
      label: '折扣',
      type: 'inputNumber',
      width: 120,
      cat: 'percent',
      pre: '%'
    },
    unitPrice: {
      label: '上架价格',
      type: 'inputNumber',
      width: 120,
      cat: 'price',
      pre: ''
    },
    number: {
      label: '可周转数量',
      type: 'inputNumber',
      width: 120,
      max: (row: any) => row.surplusNum
    },
    goodsType: {
      label: '上架类型',
      type: 'select',
      options: [
        {
          label: '固定资产',
          value: 'GDZC'
        },
        {
          label: '周转材料',
          value: 'ZZCL'
        },
        {
          label: '剩余物资',
          value: 'XYWZ'
        },
        {
          label: '办公物品',
          value: 'BGWP'
        }
      ]
    },
    action: {
      label: '操作',
      width: 170,
      fixed: false,
      template: [
        {
          tag: 'a',
          text: '删除',
          callback: (index: number) => this.delHandle(index)
        }
      ]
    }
  };
  pageConfig: any = {
    current: 1,
    total: 0,
    pageSize: 10,
    onChange: this.changePage
  };
  priceCheck: any = 0; // 0都不选，1为升序（第一个为最低），2 为降序（第一个为最高）
  numberCheck: any = 0;
  rules: any = {
    ncMaterielIds: [{ required: true, message: '请选择物料编号', trigger: 'change' }],
    ncMaterielName: [{ required: true, message: '请填写物资名称', trigger: 'blur' }],
    goodsSpec: [{ required: true, message: '请填写规格', trigger: 'blur' }],
    goodsModel: [{ required: true, message: '请填写型号', trigger: 'blur' }],
    buyPrice: [{ required: true, message: '请填写采购价格', trigger: 'blur' }],
    goodsUnit: [{ required: true, message: '请选择单位', trigger: 'change' }],
    discount: [{ required: true, message: '请输入折扣', trigger: 'blur' }],
    unitPrice: [{ required: true, message: '请输入上架价格', trigger: 'blur' }],
    number: [{ required: true, message: '请输入可周转数量', trigger: 'change' }],
    goodsType: [{ required: true, message: '请选择上架类型', trigger: 'change' }],
    goodsKind: [{ required: true, message: '请选择资产类型', trigger: 'change' }],
    provinceId: [{ required: true, message: '请选择省份', trigger: 'change' }],
    cityId: [{ required: true, message: '请选择省份', trigger: 'change' }],
    address: [{ required: true, message: '请输入地址', trigger: 'blur' }],
    linkPhone: [
      { required: true, message: '请输入联系电话', trigger: 'blur' },
      { validator: rules.checkPhone(), trigger: 'blur' }
    ],
    linkMan: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
    goodsDesc: [{ required: true, message: '请输入物资详情', trigger: 'blur' }],
    ncProjectId: [{ required: true, message: '请选择所属项目', trigger: 'change' }]
  };
  editRules: any = {
    cityId: [{ required: true, message: '请选择区域', trigger: 'blur' }],
    address: [{ required: true, message: '请输入地址', trigger: 'blur' }],
    linkPhone: [
      { required: true, message: '请输入联系电话', trigger: 'blur' },
      { validator: rules.checkPhone(), trigger: 'blur' }
    ],
    linkMan: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
    goodsDesc: [{ required: true, message: '请输入物资详情', trigger: 'blur' }]
  };
  labelCol: Icol = {
    span: 8
  };
  wrapperCol: Icol = {
    span: 14
  };
  selectedRowKeys: any[] = [];
  provinceList: any[] = []
  cityList: any[] = []
  unitList: any = [
    {
      label: '立方米',
      value: 'LFM'
    },
    {
      label: '吨',
      value: 'D'
    },
    {
      label: '米',
      value: 'M'
    },
    {
      label: '平方米',
      value: 'PFM'
    }
  ]
  kindList: any = [
    {
      label: '木方',
      value: 'MF'
    },
    {
      label: '模板',
      value: 'MB'
    },
    {
      label: '竹胶板',
      value: 'ZJB'
    },
    {
      label: '工字钢',
      value: 'GZG'
    },
    {
      label: '标化材料',
      value: 'BHCL'
    }
  ]
  materialList: any = []
  uploadIndex: number = 0 // 上传下标
  selectedGoods: any = []
  goodsList: any[] = []
  projects: any[] = []

  // get rowSelection () {
  //   return {
  //     selectedRowKeys: this.selectedRowKeys,
  //     onChange: this.changeSelection
  //   };
  // }
  get goodsId () {
    return this.$route.query.goodsId
  }
  get isEdit () {
    return this.$route.query.isEdit === 'edit'
  }

  init () {
    this.getAllGoods()
    this.getProvince()
    // this.getMaterialCategoryList()
    this.getMyProjects()
    if (this.isEdit) {
      this.getDetail()
      this.getPicList()
    }
  }
  // 改变折扣计算上架价格
  changeDiscount (val:any) {
    this.form.unitPrice = Number(Number(val) / 100 * this.form.unitPrice2).toFixed(2)
  }
  // 改变上架价格计算折扣
  changeUnitPrice (val:any) {
    this.form.discount = Number(Number(val.target.value) / Number(this.form.unitPrice2) * 100).toFixed(2)
  }
  // 盘点上架
  getAllGoods () {
    let { current, pageSize } = this.pageConfig
    let data = {
      page: current,
      size: pageSize
    }
    this.$api.goodsCountingListFetch(data).then((res: any) => {
      res.data.records.forEach((ele: any) => {
        ele.countingTaskGoodsFiles = ele.countingTaskGoodsFiles.map((item: any, index: number) => ({
          uid: -index - 1,
          url: item.url,
          name: item.url
        }))
      })
      this.Data = res.data.records
      this.pageConfig.total = res.data.total
    })
  }
  // 获取物料数据
  getMaterialCategoryList () {
    this.$api.goodsNcMaterielTypeListFetch().then((res: any) => {
      res.data.forEach((item: any) => {
        item.child.forEach((ele: any) => {
          if (ele.child.length > 0) {
            ele.child.forEach((o: any) => {
              o.isLeaf = false
            })
          } else {
            ele.child = null
          }
        })
      })
      this.materialList = res.data

      console.log(this.materialList, 'this.materialList')
    })
  }
  getProvince () {
    this.$api.regionProvinceListFetch().then((res: any) => {
      this.provinceList = res.data.map((item: any) => ({label: item.province, value: item.areaId}))
    })
  }

  getCity (form: string, parent_id: any, id: any) {
    this[form].cityId = id || undefined
    this.$api.regionCityListFetch({parent_id}).then((res: any) => {
      this.cityList = res.data.map((item: any) => ({label: item.city, value: item.areaId}))
    })
  }
  getMyProjects () {
    this.$api.countingGetNcProjectFetch().then((res: any) => {
      // this.projects = res.data.map((item: any) => ({label: item.name, value: item.id}))
      this.projects = res.data
    })
  }
  // 选择物料
  chooseMaterial (id: any) {
    let obj = this.materialList.find((ele: any) => ele.id === id)
    this.form.ncMaterielName = obj.name
  }
  // 选择区域
  chooseCity (id: any) {
    let cityObj = this.cityList.find((ele: any) => ele.id === id)
    this.form.cityName = cityObj.name
  }
  changePage (val: number) {
    this.pageConfig.current = val;
    this.getAllGoods();
  }
  delHandle (index: any) {
    this.editData.splice(index, 1)
  }
  showDetail () {
    this.$router.push({
      path: '/allot/market/operate',
      query: { _alias: 'detail' }
    });
  }
  // 获取商品详情
  getDetail () {
    const data = {
      goods_id: this.goodsId
    }
    this.$api.goodsDetailFetch(data).then((res: any) => {
      res.data.unitPrice2 = res.data.unitPrice
      this.form = Object.assign({}, res.data)
      this.form.discount = Number(Number(res.data.unitPrice) / Number(res.data.unitPrice) * 100).toFixed(2)
      // this.getNcMaterialList(res.data.ncMaterielIds.split(',')[res.data.ncMaterielIds.split(',').length - 1])
      let { provinceId, cityId } = res.data
      this.getCity('form', provinceId, cityId)
    });
  }
  // 资产照片
  getPicList () {
    const data = {
      goods_id: this.goodsId
    }
    this.$api.goodsPicListFetch(data).then((res: any) => {
      this.goodsPics = res.data.map((item: any, index: number) => ({
        uid: -index - 1,
        url: item.picUrl,
        name: item.picUrl
      }))
    });
  }
  // 点击上传照片
  clickUpload (index: number) {
    this.uploadIndex = index
  }
  // 上传图片
  handleUpload (fileList: any) {
    this.$set(this.Data[this.uploadIndex], 'countingTaskGoodsFiles', fileList)
  }
  handleDirectUpload (fileList: any) {
    this.goodsPics = fileList;
  }
  // 移除图片
  handleDirectRemove (file:any) {
       this.goodsPics = this.goodsPics.filter((item:any) => {
        return item.url !== file.url;
      })
  }
  // 选择上架
  changeSelection (selectedRowKeys: any, selectedRows: any[]) {
    this.selectedGoods = selectedRowKeys;
    this.editData = selectedRows
    // console.log('1111', selectedRowKeys, selectedRows)
  }
  handleCancel () {
    this.visible = false;
  }
  handleOk () {}
  // 盘点上架操作的上架
  upGoods (row: any) {
    let { ncMaterielId, ncMaterielName, countingTaskGoodsFiles, surplusNum, taskDetailId} = row
    this.form.ncMaterielId = ncMaterielId
    this.form.ncMaterielName = ncMaterielName
    this.form.surplusNum = surplusNum
    this.form.taskDetailId = taskDetailId
    this.goodsPics = countingTaskGoodsFiles
    this.visible = true
  }
  // 下一步
  nextStep (type: any) {
    if (!this.editData.length) return this.$message.error('请先选择材料')
    console.log('批量上架', this.editData)
    if (type === 'first') {
      this.editData.forEach((ele: any, index: number) => {
        this.$set(this.editData[index], 'unitPrice', 0)
        this.$set(this.editData[index], 'unitPrice2', 0)
        this.$set(this.editData[index], 'goodsType', '')
        this.$set(this.editData[index], 'discount', 0)
        this.$set(this.editData[index], 'number', 0)
      })
      this.firstStep = false;
      this.secondStep = true;
      this.thirdStep = false;
    } else if (type === 'second') {
      this.firstStep = false;
      this.secondStep = false;
      this.thirdStep = true;
    }
  }
  // 上一步
  backTop (type: any) {
    // console.log('1111', type, this.editData);
    if (type === 'second') {
      this.firstStep = true;
      this.secondStep = false;
      this.thirdStep = false;
    } else if (type === 'third') {
      this.firstStep = false;
      this.secondStep = true;
      this.thirdStep = false;
    }
  }
  // 直接上架商品提交
  // 暂存、提交上级
  // @Validate('form')
  handleSubmit () {
    console.log(this.form, 'this.form')
    let { provinceId, cityId, ncMaterielId, number, surplusNum } = this.form
    if (!ncMaterielId) {
      return this.$message.error('请选择物资')
    }
    if (!this.goodsPics.length) {
      return this.$message.error('请上传资产照片')
    }
    if (number > surplusNum) {
      return this.$message.error('可周转数量不能大于闲置数量')
    }
    let goodsPics = this.goodsPics.map((item: any) => ({
      picUrl: this.$util.getPicUrl(item)
    }))
    let goods = JSON.parse(JSON.stringify(this.form))
    goods.ncMaterielIds = Array.isArray(goods.ncMaterielIds) ? goods.ncMaterielIds.join(',') : goods.ncMaterielIds
    let data = [{
      goods,
      goodsPics
    }]
    this.$api.goodsSaveGoodsFetch(data).then(() => {
      // this.isEdit && this.$message.success(`${this.goodsId ? '编辑成功' : '上架成功'}`)
      // this.isEdit && this.$router.back()
      this.visible = false // 盘点上架弹窗关闭
      this.$message.success('上架成功')
      this.$router.back()
    })
  }
  // 批量上架
  @Validate('editForm')
  handleBatchUp () {
    let { editData } = this
    let { provinceId, cityId } = this.editForm
    for (var i = 0; i < editData.length; i++) {
        for (var key in editData[i]) {
            if (!editData[i].unitPrice) {
                return this.$message.error('请输入上架价格')
            }
            if (!editData[i].goodsType) {
                return this.$message.error('请选择上架类型');
            }
            if (!editData[i].number) {
                return this.$message.error('请输入可周转数量');
            }
        }
    }
    if (!provinceId || !cityId) {
      return this.$message.error('请选择区域')
    }
    editData = editData.map((ele: any) => {
      delete ele.goodsId
      let goodsPics = ele.countingTaskGoodsFiles.map((item: any) => ({
        picUrl: this.$util.getPicUrl(item)
      }))
      return {
        goodsPics,
        goods: Object.assign(ele, this.editForm)
      }
    })
    let data = editData
    this.$api.goodsSaveGoodsFetch(data).then(() => {
      this.$message.success('上架成功')
      this.$router.back()
    })
  }
  getNcMaterialList (row: any) {
    console.log(row, 'ro111w')
    this.$api.goodsNcMaterielListPageFetch({
      id: row.id ? row.id : row,
      page: 1,
      size: 999999
    }).then((res: any) => {
      // row.loading = false
      this.wuliangList = res.data.records
      // row.child = res.data.records.map((item: any) => ({ id: item.wuliaoCode, name: item.wuliaoName }))
      // this.materialList = [...this.materialList]
      // this.goodsList = row.child
    })
  }
  loadData (selectedOptions: any[]) {
    console.log(selectedOptions, '===selectedOptionsselectedOptions==')
    const targetOption = selectedOptions[selectedOptions.length - 1];
    targetOption.loading = true;
    this.getNcMaterialList(targetOption)
  }
  changeMaterial (event:any) {
    this.getNcMaterialList(event[event.length - 1])
    // this.form.ncMaterielId = event[event.length - 1]
    if (this.form.ncMaterielIds.length < 4) {
      this.form.ncMaterielName = ''
      return
    }
    let goodsId = this.form.ncMaterielIds[this.form.ncMaterielIds.length - 1]
    console.log(this.goodsId, '==this.goodsList=')
    let row = this.goodsList.find(item => item.id === goodsId)
    this.form.ncMaterielName = row.name
    this.form.ncMaterielId = goodsId
  }
  goBack () {
    this.$router.back()
  }
}
</script>

<style lang="scss" scoped>
#Ground {
  .filter-box {
    margin: 0 20px 0;
    min-width: 960px;
    background: #fff;
    padding: 20px 25px 5px;
  }
  .container {
    width: 100%;
    .table-list {
      width: 100%;
      // max-height: 500px;
      // overflow: hidden;
      // overflow-y: auto;
      .table-item {
        width: 100%;
        border: 1px solid #ececec;
        display: flex;
        align-items: center;
        padding: 8px;
        box-sizing: border-box;
        margin-bottom: 12px;
        cursor: pointer;
        .table-left {
          width: 160px;
          height: 160px;
          flex-shrink: 0;
          margin-right: 24px;
          .table-img {
            width: 100%;
            height: 100%;
          }
        }
        .table-right {
          flex: 1;
          height: 100%;
          display: flex;
          padding: 18px 32px 24px 0;
          box-sizing: border-box;
          flex-direction: column;
          .right-top {
            width: 100%;
            display: flex;
            justify-content: space-between;
            margin-bottom: 32px;
            .right-top-item {
              display: flex;
              align-items: center;
              .right-name {
                font-weight: 800;
                color: #000;
                font-size: 16px;
              }
              .right-square {
                margin-left: 20px;
              }
            }
          }
          .right-center {
            margin-bottom: 32px;
            font-weight: 800;
            font-size: 16px;
            color: #000;
          }
          .right-bottom {
            width: 100%;
            display: flex;
            justify-content: space-between;
            .bottom-center-item {
              font-weight: 800;
              font-size: 16px;
              color: #000;
            }
          }
        }
        .table-btn-right {
          width: 150px;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
    .page-box {
      margin-top: 24px;
      display: flex;
      justify-content: flex-end;
    }
    .last-step {
      // display: flex;
    }
    .footer-btns {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 50px 0;
      .ant-btn {
        margin-right: 20px;
      }
    }
  }
  .info-title {
    margin-bottom: 20px;
    font-weight: 600;
    color: #000;
    .required {
      color: red;
    }
    &::before {
      content: "";
      width: 3px;
      height: 20px;
      background: $themeColor;
      display: inline-block;
      margin-right: 10px;
      vertical-align: middle;
    }
  }
}
.form-row {
  display: flex;
  flex-wrap: wrap;
  .form-col {
    width: 50%;
    flex-shrink: 0;
    // margin-right: 10px;
    &.col-100 {
      width: 100%;
    }
    .form-tip {
      color: #999;
    }
  }
}
.info-title {
  margin-bottom: 20px;
  font-weight: 600;
  color: #000;
  &::before {
    content: "";
    width: 3px;
    height: 20px;
    background: $themeColor;
    display: inline-block;
    margin-right: 10px;
    vertical-align: middle;
  }
}
</style>
